<template>
  <el-dialog v-model="dialogUserRole" @close="cancel" width="400px">
    <template #header>
      <div class="header-title">查看代管箱利润</div>
    </template>
    <div class="main-cen">
      <div>业务编号: {{ form.businessNo }}</div>
      <div>代管箱信息</div>
      <el-table stripe :data="form.feeBusinessContainerBeanList">
          <template v-for="item in columns" :key="item.key">
            <el-table-column v-if="item.visible" :label="item.label" align="center"
            :prop="item.key" :fixed="item?.fixed" :width="item?.width">
            <template v-if="item.slotName=='boxType'" #default="scope">
                {{ boxTypeOptions[scope.row.boxType] }}
              </template>
              <template v-else-if="item.slotName=='boxCondition'" #default="scope">
                {{ boxCaseOptions[scope.row.boxCondition] }}
              </template>            
            </el-table-column>
          </template>
        </el-table>
      <div>代管箱利润
        <el-tooltip :content="'各类币种费用独立计算代管利润综合；选择折算币种，根据折算汇率计算折算币种代管利润总和。'" effect="dark" placement="top">
            <el-icon class="el-icon--right" :size="14" color="#999">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
      </div>
      <div class="tibs">*为您独立计算了该业务编号各类币种的各自代管箱利润总和</div>
          <div class="fee-main">
            <div class="fee-item">总计</div>
            <div class="fee-item">代管利润：<span class="corol-red">¥{{ form.cnyProfit || 0 }}</span></div>
            <div class="fee-item">代管利润：<span class="corol-red">${{ form.usdProfit || 0 }}</span></div>
          </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'
import { selectFeeBusinessStoringProfit } from '@/api/financial/stowageInfo'
import type { FormInstance, FormRules } from 'element-plus'
const refType=ref(5)
const dialogUserRole=ref(false) //弹框
const boxTypeOptions=ref({ 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' })
const boxCaseOptions=ref({5: '全新', 10: '次新', 15: '适货', 20: '混提' })
const data = reactive({
    form: {},
});
const { form } = toRefs(data);
const onShow = async (row,type) => {
  dialogUserRole.value = true 
  refType.value=type
  getRoleDetail(row,type)  
}
const columns = ref([
  {key: 'containerNo', label: `箱号`, visible: true},
  {key: 'boxType', label: `箱型`,slotName: 'boxType', visible: true},
  {key: 'boxCondition', label: `箱况`,slotName: 'boxCondition', visible: true},
]);
//详情查询
const getRoleDetail=(row,type)=>{
  let data={
    businessNo:row,
    refType:type
  }
  selectFeeBusinessStoringProfit(data).then(res => {
    form.value=res.data
  })
}
//关闭弹框
const cancel = () => {
  dialogUserRole.value=false
}
defineExpose({ onShow })
</script>

<style scoped>

.tibs{
  color: #2158F3;
  font-size: 12px;
}
.fee-main{
  display: flex;
  border: 1px solid #eeeeee;
  padding: 10px;
  margin-top: 10px;
}
.fee-item{
  margin-right: 20px;
}
.header-title{
  border-left: 4px solid #2158F3;
  padding-left: 8px;
  line-height: 18px;
}
.corol-red{
  color: #FF4242;
}
div{
  margin-top:10px ;
  color: #000;
}
</style>